:root {
}

.sv-el-navbar {
  --el-menu-horizontal-height: #{$sv-nav-bar-height};
  @include useTheme {
    --el-menu-bg-color: #{getTheme('sv-background-color')};
    --el-menu-border-color: #{getTheme('sv-border-color')};
  }
}

.sv-el-sidebar {
  border-right: unset;
  @include useTheme {
    --el-menu-bg-color: #{getTheme('sv-background-color')};
    --el-menu-text-color: #{getTheme('sv-text-color')};
    --el-menu-active-color: #{getTheme('sv-primary-color')};
    --el-menu-hover-text-color: #{getTheme('sv-primary-color')};
    --el-menu-hover-bg-color: #{getTheme('sv-hover-color')};
  }
}

.sv-el-input {
  @include useTheme {
    --el-input-text-color: #{getTheme('sv-text-color')};
    --el-input-bg-color: #{getTheme('sv-background-color')};
  }
}

.sv-el-select {
  @include useTheme {
    :deep(.el-input) {
      --el-input-bg-color: #{getTheme('sv-background-color')};
      --el-input-text-color: #{getTheme('sv-text-color')};
    }
  }
}

.sv-el-table {
  @include useTheme {
    --el-table-bg-color: #{getTheme('sv-background-color')};
    --el-table-tr-bg-color: #{getTheme('sv-background-color')};
    --el-table-border-color: #{getTheme('sv-border-color')};
    --el-table-header-bg-color: #{getTheme('sv-mask-highlight-color')};
    --el-table-header-text-color: #{getTheme('sv-text-sub-color')};
    --el-table-text-color: #{getTheme('sv-text-color')};
    --el-table-row-hover-bg-color: #{getTheme('sv-hover-color')};
    --el-table-expanded-cell-bg-color: #{getTheme('sv-background-color')};
    --el-fill-color-blank: #{getTheme('sv-background-color')};

    :deep(.el-button) {
      --el-fill-color-light: #{getTheme('sv-hover-color')};
      &:active {
        color: #{getTheme('sv-primary-color')};
        background-color: #{getTheme('sv-hover-color')};
      }
    }
    :deep(.el-button-group .el-button) {
      --el-button-text-color: #{getTheme('sv-text-color')};
      --el-button-hover-bg-color: #{getTheme('sv-hover-color')};
      --el-button-hover-text-color: #{getTheme('sv-hover-color')};
      --el-fill-color-light: #{getTheme('sv-mask-highlight-color')};
      &:active {
        background-color: #{getTheme('sv-hover-color')};
      }
    }
  }

  @include useDarkTheme {
    :deep(.el-button) {
      --el-button-text-color: #{getTheme('sv-text-color')};
    }
  }
}

.sv-el-pagination {
  @include useTheme {
    --el-pagination-bg-color: #{getTheme('sv-background-color')};
    --el-pagination-text-color: #{getTheme('sv-text-color')};
    --el-pagination-button-bg-color: #{getTheme('sv-background-color')};
    --el-pagination-button-color: #{getTheme('sv-text-color')};
    --el-text-color-regular: #{getTheme('sv-text-color')};
    --el-pagination-button-disabled-bg-color: #{getTheme('sv-background-color')};

    :deep(.el-input) {
      --el-input-bg-color: #{getTheme('sv-background-color')};
      --el-input-text-color: #{getTheme('sv-text-color')};
    }
  }
}
.sv-el-form {
  @include useTheme {
    --el-text-color-regular: #{getTheme('sv-text-color')};
    --el-input-bg-color: #{getTheme('sv-background-color')};
    color-scheme: #{getTheme('sv-theme-key')};

    :deep(.el-input) {
      --el-input-text-color: #{getTheme('sv-text-color')};
      --el-input-bg-color: #{getTheme('sv-background-color')};
      --el-disabled-bg-color: #{getTheme('sv-mask-color')};
    }

    :deep(.input) {
      color: #{getTheme('sv-text-color')};
    }

    :deep(.el-date-editor) {
      --el-input-text-color: #{getTheme('sv-text-color')};
      --el-input-bg-color: #{getTheme('sv-background-color')};
    }

    :deep(.el-textarea__inner) {
      --el-input-bg-color: #{getTheme('sv-background-color')};
    }

    :deep(.el-input-number) {
      --el-fill-color-light: #{getTheme('sv-background-color')};
    }

    :deep(.el-input-group__append) {
      --el-fill-color-light: #{getTheme('sv-mask-color')};
    }

    :deep(.sv-dynamic-input) {
      .disable {
        background-color: #{getTheme('sv-mask-color')};
      }
    }
  }
}

.sv-el-drawer {
  @include useTheme {
    --el-drawer-bg-color: #{getTheme('sv-background-color')};
  }
}

.el-loading-mask {
  @include useTheme {
    // hex拼接alpha形成半透明遮罩色
    --el-mask-color: #{getTheme('sv-mask-color') + 'aa'};
  }
}

.el-popper {
  @include useTheme {
    color: #{getTheme('sv-text-color')};
    --el-text-color-regular: #{getTheme('sv-text-color')};
    --el-bg-color-overlay: #{getTheme('sv-popper-bg-color')};
    --el-fill-color-light: #{getTheme('sv-hover-color')};
    --el-dropdown-menuItem-hover-fill: #{getTheme('sv-hover-color')};
    --el-dropdown-menuItem-hover-color: #{getTheme('sv-primary-color')};
    --el-fill-color-blank: #{getTheme('sv-popper-bg-color')};
    --el-text-color-primary: #{getTheme('sv-border-highlight-color')};
    --el-border-color-light: #{getTheme('sv-border-color')};
    --el-disabled-bg-color: #{getTheme('sv-popper-bg-color')};
    --el-border-color-extra-light: #{getTheme('sv-hover-highlight-color')};

    :deep(.el-date-table) {
      --el-datepicker-inrange-bg-color: #{getTheme('sv-hover-color')};
    }
    :deep(.el-time-spinner__item.is-active) {
      --el-text-color-primary: #{getTheme('sv-primary-color')};
    }
    :deep(.el-table) {
      --el-bg-color: #{getTheme('sv-popper-bg-color')};
      --el-border-color-lighter: #{getTheme('sv-border-color')};
    }
    :deep(.el-dropdown-menu) {
      --el-border-color-lighter: #{getTheme('sv-border-color')};
    }
  }
}

.el-message-box {
  @include useTheme {
    --el-bg-color: #{getTheme('sv-popper-bg-color')};
    --el-border-color-lighter: #{getTheme('sv-border-color')};
    --el-messagebox-title-color: #{getTheme('sv-text-highlight-color')};
    --el-messagebox-content-color: #{getTheme('sv-text-color')};
  }
}

.sv-el-descriptions {
  @include useTheme {
    --el-fill-color-blank: #{getTheme('sv-card-color')};
    --el-text-color-primary: #{getTheme('sv-text-sub-color')};
    --el-text-color-regular: #{getTheme('sv-text-color')};
  }
}

.sv-el-dialog {
  @include useTheme {
    --el-dialog-bg-color: #{getTheme('sv-dialog-bg-color')};
    --el-text-color-primary: #{getTheme('sv-text-color')};
    border: 1px solid #{getTheme('sv-border-color')};
  }
}

// uni-media-library媒体库插件配色
.sv-media-lib {
  @include useTheme {
    background-color: #{getTheme('sv-background-color')};
    .media-info-wrap {
      background-color: #{getTheme('sv-background-color')};
      border-left: 1px solid #{getTheme('sv-border-color')};

      .title {
        color: #{getTheme('sv-text-sub-color')};
      }

      .info-item {
        .label {
          color: #{getTheme('sv-text-sub-color')};
        }
        .content {
          color: #{getTheme('sv-text-color')};
        }
      }
    }
    .tabs {
      border-bottom: 1px solid #{getTheme('sv-border-color')};
      .tabs-nav {
        background-color: #{getTheme('sv-background-color')};

        .tab-label {
          color: #{getTheme('sv-text-sub-color')};
        }
        .active {
          color: #{getTheme('sv-primary-color')};
        }
      }
    }
  }
}
